<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <canvas width="512" height="512"></canvas>
  <script src="/js/mesh.js"></script>
  <script>
  const {Renderer, Figure2D, Mesh2D} = meshjs;

  const canvas = document.querySelector('canvas');
  const renderer = new Renderer(canvas);

  const girls = [
    'https://p5.ssl.qhimg.com/t01feb7d2e05533ca2f.jpg',
    'https://p5.ssl.qhimg.com/t01deebfb5b3ac6884e.jpg',
  ];

  const filters1 = [
    null,
    ['brightness', 1.5],
    ['grayscale', 0.5],
    ['blur', 2],
    // ['blur', 12],
    ['hueRotate', 45],
  ];

  
  const meshList = [];

  (async function () {
    const textures = await Promise.all([
      renderer.loadTexture(girls[0]),
      renderer.loadTexture(girls[1]),
    ]);

    const figure = new Figure2D();
    figure.rect(0, 0, 64, 64);

    for(let i = 0; i < filters1.length; i++) {
      const mesh = new Mesh2D(figure);
      mesh.setTexture(textures[0], {
        rect: [0, 0, 64, 64],
      });
      mesh.setFill({
        color: [1, 0, 0, 1],
      });
      mesh.translate(32 + 96 * i, 68);
      if(filters1[i]) {
        mesh[filters1[i][0]].call(mesh, ...filters1[i].slice(1));
      }
      // if(i === 0) {
      //   mesh.dropShadow(15, 15, 5, [0, 0, 1, 1]);
      // }
      meshList.push(mesh);
    }

    renderer.drawMeshes(meshList);
  }());
  </script>
</body>
</html>